<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    @font-face {
        font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_2511297_si26yf6712h.eot?t=1619349690962');
        /* IE9 */
        src: url('//at.alicdn.com/t/font_2511297_si26yf6712h.eot?t=1619349690962#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALoAAsAAAAABswAAAKcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBIIEVATYCJAMMCwgABCAFhG0HTBvxBSMRdmoOCpD99YFtzG2s3sMZoNICg+uJsLixuKktFdrkaQ7ejvrK/HYRMVHcct/Hw9Ma7f2Z2T2VdpdUo2KqoWuC1AiRkAhNolgkbwDABty+awgDwOjt/5xVV21qNmoOSO357jSwKiQfCunLz6HRA3fujDlh2QI9vy4oPFzVEn+syfRkpbisCCWTAlORTQ6ZPPg8l9O7BlAg81uWyxzLj3oBxgEFtDe2yUokEG+pXcRJ5QW9Ok+g3ag5sTs5fFqrAk0LxGN374bWTlRRkkKrUE+sLeKDSmt6l4738vvxx0q0klQZmnv87p7btr/7vbxmlzkhRvA3V8iYQyGuTmbPyyJhZe3aslxZK0I6K9FISmt9/dI/XiJqqL4TTPm5xHepgOB7GySQQd3Nj2MpYA4+K8RAEMZsa5+KlQPXeOht7znQ5jqBxSpGt73ZOebF/AnX/ZRdf8f6fLzLW+nrq6zrq+u1aE6Snn4H/xvfPLgOGtPfHCB/EQiGD+/tvtaz/r+1BXz5xaMXbSzg+tYv+II/JgO2lFqBbLmUUipt/dkAwJ3wxWlAExTs922/fgjcTGg1tMPfYsQiazVGFuYcKh3WUGu1hXaz9m3uMOClLEobZrzyEHp9RNLtE7Jen8nC/IrKsH+o9UZGu7MxsGeHDw4XE0wVC8huweXcEHForBr30VxWqbgKyT5GCS4Bk+G4X1hig3LGgnBlpqoEJFxD4l2GVcXQCnvMdWhV28VoRFNvGuZcRzGCqWIBslvgcm6Id9Z48Pl9NJdVKguUlfAxSnC9g4mhMYBcahsQ5VuuCVdmSpUACdcg8UZhVTFop0d5zHXI7ki3CyPcjqDa4f36+v92QTt0fo4UOYpuiPD1oELSQcZV0enGxBkbW6II') format('woff2'),
            url('//at.alicdn.com/t/font_2511297_si26yf6712h.woff?t=1619349690962') format('woff'),
            url('//at.alicdn.com/t/font_2511297_si26yf6712h.ttf?t=1619349690962') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('//at.alicdn.com/t/font_2511297_si26yf6712h.svg?t=1619349690962#iconfont') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .iconarrow-left-bold:before {
        content: "\e685";
    }

    .iconarrow-right-bold:before {
        content: "\e687";
    }



    * {
        padding: 0;
        margin: 0;
    }

    .view {
        position: relative;
        overflow: hidden;
        width: 1200px;
        height: 350px;
        margin: 100px auto;
    }

    #pic {
        position: absolute;
        width: 6000px;
        height: 350px;
        transition: all 0.8s ease;

        /* transition: left 1000ms linear 0ms; */
        /* left:-1200px; */
    }

    #pic img {
        width: 1200px;
        height: 350px;
        float: left;
    }

    #left {
        cursor: pointer;
        width: 30px;
        height: 50px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        font-size: 20px;
        color: rgba(250, 250, 250, 0.7);
        text-align: center;
        line-height: 50px;
        top: 40%;
        left: 0;
        display: none;
    }

    #right {
        cursor: pointer;
        width: 30px;
        height: 50px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        font-size: 20px;
        color: rgba(250, 250, 250, 0.7);
        text-align: center;
        line-height: 50px;
        top: 40%;
        right: 0;
        display: none;
    }

    .view:hover #left {
        display: block;
    }

    .view:hover #right {
        display: block;
    }

    #left:active {
        color: #fff;
    }

    #right:active {
        color: #fff;
    }
</style>

<body>
    <div class="view">
        <div id="pic">
            <a href="#"><img src="img/4bd0e5b8-f865-4551-b99e-68f057e07506.jpg"></a>
            <a href="#"><img src="img/544f8dab-65a9-4066-bcb7-5d7edc999012.jpg"></a>
            <a href="#"><img src="img/6ac704c7-423a-485a-ad8b-55cf9c0e8e3c.jpg"></a>
            <a href="#"><img src="img/bad195a8-7f18-4214-9d8b-21c1c7f8314c.jpg"></a>
            <a href="#"><img src="img/4bd0e5b8-f865-4551-b99e-68f057e07506.jpg"></a>
        </div>
        <div id="left"><i class="iconfont iconarrow-left-bold"></i></div>
        <div id="right"><i class="iconfont iconarrow-right-bold"></i></div>
    </div>

    <script>
        window.onload = function () {
            var pic = document.getElementById("pic");
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            var view = document.querySelector(".view");
            var step = 0;

            function autoMove() {

                step++;

                if (step >= 5) {
                    pic.style.transitionDuration = '0ms';
                    pic.style.left = 0 + 'px';
                    step = 1;
                    pic.offsetLeft;//中断渲染，立即变换
                }
                pic.style.transitionDuration = '1000ms';

                pic.style.left = -step * 1200 + 'px';


            }

            function moveLeft() {
                step--;

                if (step < 0) {

                    pic.style.transitionDuration = '0ms';

                    pic.style.left = -4800 + 'px';
                    pic.offsetLeft;//中断渲染,立即变换
                    step = 3;
                }
                pic.style.left = -step * 1200 + 'px';

                pic.style.transitionDuration = '1000ms';
            }

            var autoTime = setInterval(autoMove, 4000);

            left.onclick = function () {
                // step--;

                // if(step<0){
                //     pic.style.transitionDuration='0ms';
                //     pic.style.left=5*1200+'px';
                //     step=3;
                //     pic.offsetLeft;//中断渲染

                // }
                // pic.style.left=-step*1200+'px';

                // pic.style.transitionDuration='1000ms';
                moveLeft();
            }

            right.onclick = function () {
                // alert("A");
                autoMove();
            }

            view.onmouseenter = function () {
                clearInterval(autoTime);
            }
            view.onmouseleave = function () {
                autoTime = setInterval(autoMove, 4000);

            }
        }
    </script>
</body>

</html>